<template>
    <div class="item-pic">
      <div class="inner">
           <div class="thumbs-box">
               <img class="thumbs" :src="$Url+data.image" alt="img">
               <div class="option">
                   <div class="button-box">
                       <span class="btn" @click="del(data.id)">删除</span>
                       <!--<span class="btn">编辑</span>-->
                   </div>
               </div>
           </div>
          <div class="details">
            <p class="title">{{data.content}}</p>
          </div>
      </div>
    </div>
</template>

<script>
    /***
     * @data 入参
     *
     */
    export default {
        name: "DiaryItem",
        props: {
          data: {
              type: Object,
          },
            type: {
              type: Number
            }
        },
        data () {
           return {
           }
        },
        methods :{
            del (id) {
                let _this =this
                _this.$post('/api/activity/delPic',
                    {
                        pic_id:id
                    }, function (res) {
                        _this.$message.success(res.msg);
                        _this.$emit('delct',1)
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            }
        }
    }
</script>

<style  lang="less" scoped>
    @import "../../style/style.less";
    .item-pic{
        .inner {
            border: 1px solid @border-color;
            margin-top: 10px;
            .thumbs-box {
                width: 100%;
                position: relative;
                .thumbs {
                    width: 100%;
                }
                .option {
                    position: absolute;
                    z-index: 2;
                    top: 10px;
                    right: 10px;
                    display: none;
                    .btn {
                        display: inline-block;
                        padding: 0 10px;
                        line-height: 20px;
                        height: 20px;
                        cursor: pointer;
                        background-color: @theme-color-light;
                        border:1px solid @theme-color-dark;
                        color: @theme-color-dark;
                        border-radius: 4px;
                    }
                }
            }
            .details {
                padding: 10px;
                .title {
                    font-size: 16px;
                    color: #666;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    text-align: center;
                }
            }
            &:hover {
                .thumbs-box {
                    .option {
                        display: inline-block;
                    }
                }
            }
        }
    }

</style>